{% extends "openvolunteer/base.html" %}

{% block title %}OpenVolunteer | Édition d'une fiche{% endblock %}

{% block content %}
    <div class="answer">
        <div class="photo">
            {% if answer.volunteer.avatar %}
                <div><img src="{{ answer.volunteer.get_photo_url }}" alt="Photo de {{ answer.volunteer }}"></div>
            {% endif %}
            {% if answer.event.affiche %}
                <div><img src="{{ answer.event.get_affiche_url }}" alt="Affiche de {{ answer.event }}"></div>
            {% endif %}
        </div>
    </div>
    <form method="post" action="." class="edit-form center" 
        {% if answer.volunteer.avatar or answer.event.affiche %} 
            style="left:-83px;"
        {% endif %}>{% csrf_token %}
        <table class="centered">
            <tr>
                <th>Événement</th>
                <td class="required">{{ answer.event }}</td>
            </tr>
            <tr>
                <th>Bénévole</th>
                <td class="required">
                    <select id="id_volunteer" name="volunteer">
                        <option value="">----</option>
                        {{ sel_opts_vol|safe }}
                    </select>
                </td>
            </tr>
            <tr>
                <th>Poste</th>
                <td>
                    <select id="id_job" name="job">
                        <option value="">----</option>
                        {{ sel_opts_job|safe }}
                    </select>
                </td>
            </tr>
            <tr>
                <th>Présence</th>
                <td>
                    <select id="id_presence" name="presence">
                        <option value="maybe" {% if answer.presence == 'maybe'%}selected="selected"{% endif %}>Peut-être</option>
                        <option value="yes"   {% if answer.presence == 'yes'%}selected="selected"{% endif %}  >Oui</option>
                        <option value="no"    {% if answer.presence == 'no'%}selected="selected"{% endif %}   >Non</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>Dernière demande</th>
                <script type="text/javascript">
                    function autoToday() {
                        var d=new Date();
                        $('#id_last_request_day').attr('value', d.getDate());
                        $('#id_last_request_month').attr('value', d.getMonth() + 1);
                        $('#id_last_request_year').attr('value', d.getFullYear());
                    }
                </script>
                <td>
                    <input type="text" id="id_last_request_day" maxlength="2" size="2"
                           name="lastrequest_day" value='{{ answer.last_request|date:"d" }}'>
                    <input type="text" id="id_last_request_month" maxlength="2" size="2"
                           name="lastrequest_month" value='{{ answer.last_request|date:"m" }}'>
                    <input type="text" id="id_last_request_year" maxlength="4" size="4"
                           name="lastrequest_year" value='{{ answer.last_request|date:"Y" }}'>
                    <br>
                    (<a href="javascript:;" onclick="autoToday();">Aujourd'hui</a>)
                </td>
            </tr>
            <tr>
                <th>Fiche bénévole envoyée?</th>
                <td>
                    <input type="checkbox" id="id_updating_vol_info" name="updating_vol_info"
                           {% if answer.updating_vol_info %}checked{% endif %}
                           onclick="uncheck(this);">
                </td>
            </tr>
            <tr>
                <th>Fiche bénévole retournée?</th>
                <td>
                    <script type="text/javascript">
                        iter = 1;
                        function autoCheck(elt){
                            if (elt.checked) {
                                if (iter == 1) {
                                    var info = document.createElement('span');
                                    info.id = 'info';
                                    info.innerHTML += "<i>Coché automatiquement !</i>";
                                    $('#id_updating_vol_info').attr('parentNode').appendChild(info);
                                    iter++;
                                }
                                $('#info').css('display', 'inline');
                                $('#id_updating_vol_info').attr('checked', true);
                            }
                        }

                        function uncheck(elt){
                            if(!elt.checked) {
                                $('#info').css('display', 'none');
                            }
                        }
                    </script>
                    <input type="checkbox" id="id_updated_vol_info" name="updated_vol_info"
                           {% if answer.updated_vol_info %}checked{% endif %}
                           onclick="autoCheck(this);">
                </td>
            </tr>
            <tr>
                <th>Commentaires</th>
                <td>
                    <textarea id="id_comments" name="comments">{{ answer.comments }}</textarea>
                </td>
            </tr>
            <script type="text/javascript">
                function next(elt, type, nextElt) {
                    var testval = check(elt, type);
                    if (elt.textLength >= elt.maxLength) {
                        if (nextElt && testval == 'good') {
                            document.getElementsByName(nextElt)[0].focus();
                        }
                    }
                }

                var me = '';

                function check(elt, type) {
                    var val = parseInt(elt.value);
                    var min = 0;
                    if (type == 'hour') {
                        var max = 24;
                    } if (type == 'min') {
                        var max = 60;
                    } if (val < 0 || val > max || (isNaN(val) && elt.value != '')) {
                        elt.className = 'bad';
                        return 'bad';
                    } else {
                        elt.className = '';
                        return 'good';
                    }
                }

                function deleteSchedule(elt) {
                    elt.parentNode.style.display = 'none';
                    var i = 0;
                    while (i < (elt.parentNode.getElementsByTagName('input').length - 2)) {
                        elt.parentNode.getElementsByTagName('input')[i].value = '';
                        i++;
                    }
                }

                function add_schedule_inputs(action) {
                    var ul = document.getElementById('schedules').getElementsByTagName('ul')[0];
                    var i = ul.children.length + 1;

                    var li = document.createElement('li');
                    li.innerHTML =  "(<a href=\"javascript:;\" onclick=\"deleteSchedule(this);\">x</a>) "
                    li.innerHTML += "Horaire n°<span class=\"schedule\">" + i + "</span>: de";
                    li.innerHTML += "<input type=\"text\" name=\"schedule_" + i + "_start_hour\" maxlength=\"2\" size=\"2\" onkeyup=\"next(this, 'hour', 'schedule_" + i + "_start_min');\">H";
                    li.innerHTML += "<input type=\"text\" name=\"schedule_" + i + "_start_min\" maxlength=\"2\" size=\"2\" onkeyup=\"next(this, 'min', 'schedule_" + i + "_end_hour');\"> <br>à ";
                    li.innerHTML += "<input type=\"text\" name=\"schedule_" + i + "_end_hour\" maxlength=\"2\" size=\"2\" onkeyup=\"next(this, 'hour', 'schedule_" + i + "_end_min');\">H";
                    li.innerHTML += "<input type=\"text\" name=\"schedule_" + i + "_end_min\" maxlength=\"2\" size=\"2\" onkeyup=\"next(this, 'min');\">"
                    li.innerHTML += "<input type=\"hidden\" name=\"schedule_" + i + "_id\" hidden=\"hidden\">";
                    li.innerHTML += "<br><input type=\"checkbox\" name=\"schedule_" + i + "_next_day\">Jour suivant?";

                    ul.appendChild(li);
                    document.getElementsByName('schedulesLength')[0].value = ul.children.length;
                    if (action == 'new') {
                        li.getElementsByTagName('input')[0].focus();
                    }
                    return li
                }
            </script>
            <tr>
                <th>
                    <a href="javascript:;" onclick="add_schedule_inputs('new');" title="Ajouter un horaire de disponibilité">+ horaire</a>
                </th>
                <td>
                    <div class="schedules" id="schedules">
                        <ul class="hidden"></ul>
                        <input type="hidden" name="schedulesLength" hidden="hidden" value="0">
                    </div>
                    <script type="text/javascript">
                        {% for schedule in answer.get_all_schedules %}
                            li = add_schedule_inputs('load');
                            li.getElementsByTagName('input')[0].value = '{{ schedule.start|time:"H" }}';
                            li.getElementsByTagName('input')[1].value = '{{ schedule.start|time:"i" }}';
                            li.getElementsByTagName('input')[2].value = '{{ schedule.end|time:"H" }}';
                            li.getElementsByTagName('input')[3].value = '{{ schedule.end|time:"i" }}';
                            li.getElementsByTagName('input')[4].value = '{{ schedule.id }}';
                            {% if schedule.next_day %}
                                li.getElementsByTagName('input')[5].checked = 'checked';
                            {% endif %}
                        {% endfor %}
                        var ul = document.getElementById('schedules').getElementsByTagName('ul')[0];
                        document.getElementsByName('schedulesLength')[0].value = ul.children.length;
                    </script>
                </td>
            </tr>
        </table>
        <p class="required">* Les champs marqués en <span>rouge</span> sont obligatoires.</p>
        <input type="submit" value="Enregistrer">
    </form>
{% endblock %}

{% block navigation %}
    <ul>
       </li><a href="{{ answer.event.get_answer_url }}" title="">Accéder à la liste des réponses</a></li>
    </ul>
{% endblock %}
